<template>
  <view class="order-detail">
    <view class="wrap">
      <view class="status-title" :class="info.orderStatus == 3 ? 'cancle-title' : ''">{{ info.orderStatus | orderStatusFilter }}
      </view>
      <view class="status-text">
        {{ showOrderStatusTxt(info.orderStatus) }}
      </view>
      <view class="user-info-box">
        <view class="address" v-if="info.deliveryMethod == 1">
          {{ info.addressProvince + info.addressCity + info.addressCounty }}
        </view>
        <view class="address-desc">
          <text class="is-pic-up" v-if="info.deliveryMethod == 2">自提</text>
          {{ info.deliveryMethod == 1 ? info.addressDetail : info.addressProvince + info.addressCity + info.addressCounty }}
        </view>
        <view>
          <text class="name">{{ info.deliveryName }}</text>
          <text class="phone">{{ info.deliveryPhone }}</text>
        </view>
        <view class="contact-business-box">
          <image v-if="info.deliveryMethod == 2" class="icon-phone" :src="`${img_baseUrl}/statics/std/static/icon-phone.png`"></image>
          <view v-if="info.deliveryMethod == 2" class="contact-business0-txt" @click="callPhone">联系商家</view>
        </view>
      </view>

      <view class="shop-info">
        <view class="shop-left">
          <img class="shop-avatar" :src="`${img_baseUrl}/statics/std/static/shop.png`" alt="" />
          <text class="shop-title">{{ info.shopOrderDetailsVoList[0].storeName }}</text>
        </view>
        <view class="info-box" v-for="(volist, index) in info.shopOrderDetailsVoList" :key="index">
          <view class="left">
            <img class="avatar" :src="img_baseUrl + volist.goodsPic" alt="" />
          </view>
          <view class="right">
            <view class="title">{{ volist.goodsName }}</view>
            <view class="shop-desc">{{ volist._goodsSpec }}</view>
            <view class="price-num-box">
              <view class="price">¥{{ volist.unitPrice ? volist.unitPrice.toFixed(2) : 0.00 }}</view>
              <view class="num"> x<text>{{ volist.goodsCount }}</text> </view>
            </view>
          </view>
        </view>
        <view class="freight-box">
          <view class="freight-label">运费</view>
          <view class="freight-text">¥{{ info.postagePrice ? info.postagePrice.toFixed(2) : '0.00' }}</view>
        </view>
        <view class="pay-num-box">
          <text class="pay-num-label">应付金额：</text>
          <text class="pay-num">¥{{ info.orderTotalPrice ? info.orderTotalPrice.toFixed(2) : '0.00' }}</text>
        </view>
      </view>
      <view class="order-info">
        <view class="order-title">订单信息</view>
        <view class="item">
          <text class="order-label">订单编号</text>
          <text class="order-text">{{ info.orderNum }}</text>
        </view>
        <view class="item">
          <text class="order-label">下单时间</text>
          <text class="order-text">{{ info.orderTime }}</text>
        </view>
        <view class="item" v-if="info.orderStatus==2">
          <text class="order-label">支付时间</text>
          <text class="order-text">{{ info.payTime ? info.payTime : info.orderTime }}</text>
        </view>
      </view>
    </view>
    <view class="btn-box">
      <view v-if="info.orderStatus == '1'" class="cancel-order" @click="cancelOrder"> 取消订单</view>
      <view v-if="info.orderStatus == '1'" class="go-pay" @click="goPay"> 去支付</view>
      <view class="contact-service" v-else>
        <text class="contact-text" @click="callPhone"> 联系客服</text>
      </view>
    </view>
  </view>
</template>

<script>
import requestPost, { requestGet } from "@/utils/request";
import { ticketOrderStatus } from "@/utils/constant";
import dayjs from "dayjs";
import {throttle} from '@/utils/index.js'

export default {
  props: ["id"],
  data() {
    return {
      img_baseUrl: process.env.VUE_APP_BASEURL_IMG_API,
      headerClassName: "",
      countdownInterval: null,
      info: {
        isPicUp: true,
      },
	  backTime: 0
    };
  },
  computed: {
    time() {
      if (this.countdownInterval) {
        return dayjs(this.backTime).format("m分s秒");
      } else {
        return "0分0秒";
      }
    },
  },
  filters: {
    orderStatusFilter: function (value) {
      console.log("订单状态", value)
      return ticketOrderStatus[Number(value)] || "null";
    },
    orderStatusTxtFilter: function (value) {
      return ticketOrderTxtStatus[value] || "null";
    },
    showTime: function () {},
  },
  mounted() {
    this.getDetail();
  },
  methods: {
    getDetail() {
      requestGet(`/order/mobile/shop/${this.id}`)
        .then((res) => {
          if (res.code === 200) {
            res.data.shopOrderDetailsVoList.forEach((orderDetail) => {
              if (orderDetail.goodsSpec) {
                orderDetail.goodsSpec = JSON.parse(orderDetail.goodsSpec);
              } else {
                orderDetail.goodsSpec = [];
              }
              orderDetail._goodsSpec = orderDetail.goodsSpec.join("，");
            });
            this.info = res.data;
            if (res.data.residueTimeNum && res.data.residueTimeNum > 0) {
              this.backTime =  this.info.residueTimeNum
              this.countdownInterval = setInterval(() => {
                if(this.backTime > 0){
                  this.backTime = (this.backTime - 1000 < 0) ? 0 : (this.backTime - 1000)
                }else{
                  clearInterval(this.countdownInterval);
                  this.getDetail();
                }
              }, 1000);
            }
          }
          uni.hideLoading();
        })
        .catch((err) => console.log("错误了", err));
    },
    goPay: throttle(function() {
      const that = this;
      requestGet(`/pay/pay/transactions/shop/${that.id}`).then((res) => {
        if (res.code === 200) {
            console.log('获取了支付的数据', res)
          //调用微信官方支付接口弹出付款界面,输入密码扣款
          wx.requestPayment({
            provider: "wxpay",
            timeStamp: String(res.data.timeStamp),
            nonceStr: res.data.nonceStr,
            package: res.data.package,
            signType: res.data.signType,
            paySign: res.data.paySign,
            success(res) {
              console.log("success:" + JSON.stringify(res));
              uni.redirectTo({
                url: `/page_mall/result/index?state=1&id=${that.id}`,
              });
            },
            fail(err) {
              console.log("fail:" + JSON.stringify(err));
              uni.redirectTo({
                url: `/page_mall/result/index?state=0&id=${that.id}`,
              });
            },
          });
        }
      });
    }, 500),
    // 取消订单
    cancelOrder(id) {
      const _this = this;
      uni.showModal({
        title: "提示",
        content: "确定要取消该订单吗？",
        success: function (res) {
          if (res.confirm) {
            console.log("用户点击确定");
            uni.showLoading({
              title: "加载中",
            });
            requestPost(`/order/mobile/shop/cancel/${_this.info.orderId}`, {},'','PUT').then((res) => {
              if (res.code === 200) {
                uni.showToast({ title: "已取消", icon: "none" });
                _this.getDetail();
              }
            });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    callPhone() {
      requestGet(`/shop/mobile/store/${this.info.storeId}`, {}).then((res) => {
      	if (res.code === 200 && res.data && res.data.phone && res.data.phone != '') {
      		uni.makePhoneCall({
      			phoneNumber: res.data.phone,
      		});
      	} else {
      		uni.showToast({
      			title: "暂无联系电话",
      			icon: "none",
      		});
      		return;
      	}
      });
    },
    showOrderStatusTxt(value) {
      value =value*1
      switch (value) {
        case 1:
          return `${this.time}后订单自动取消`;
          break;
        case 2:
          return `等待商家发货`;
          break;
        case 3:
          return `订单已取消，欢迎下次使用～`;
          break;
        case 4:
          return `已核销`;
          break;
        case 5:
          return `物流单号：${this.info.orderTcode}`;
          break;
        case 6:
          return `已原路退回至支付账号，请注意查收`;
          break;
        case 7:
          return `退款中`;
          break;
      }
    },
  },
  onPageScroll(e) {
    if (e.scrollTop > 100) {
      this.headerClassName = "headerClass";
    } else {
      this.headerClassName = "";
    }
  },
};
</script>

<style lang="scss">
.order-detail {
  box-sizing: border-box;
  min-height: 100vh;
  background-color: #F5F7F6;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);

  .wrap {
    min-height: 100vh;
    background: #F5F7F6;
  }

  .status-title {
    padding: 0 40rpx;
    font-size: 40rpx;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.9);
    line-height: 56rpx;
    padding-bottom: 8rpx;
    padding-top: 24rpx;
  }
  .cancle-title{
    color: rgba(0,0,0,0.5) !important;
  }

  .status-text {
    padding: 0 40rpx;
    font-size: 24rpx;
    font-weight: 250;
    color: rgba(0,0,0,0.5);
    line-height: 34rpx;
    padding-bottom: 40rpx;
  }

  .user-info-box {
    margin: 0 32rpx;
    background: #ffffff;
    border-radius: 24rpx 24rpx 24rpx 24rpx;
    padding: 24rpx;

    &.pick-up {
    }
  }

  .address {
    font-size: 24rpx;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.7);
    line-height: 32rpx;
    padding-bottom: 24rpx;
  }

  .isDefault {
    margin-left: 26rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: #3FAA73;
    line-height: 32rpx;
    padding: 0 8rpx;
    background: rgba(63,170,115,0.1);
    border-radius: 8rpx 8rpx 8rpx 8rpx;
  }

  .is-pic-up {
    margin-right: 20rpx;
    font-size: 24rpx;
    font-weight: 600;
    color: #3FAA73;
    line-height: 44rpx;
    padding: 0 8rpx;
    background: rgba(63,170,115,0.1);
    border-radius: 8rpx 8rpx 8rpx 8rpx;
  }

  .address-desc {
    font-size: 32rpx;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.9);
    line-height: 44rpx;
    padding-bottom: 24rpx;
  }

  .name {
    font-size: 28rpx;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.9);
    line-height: 40rpx;
    padding-right: 24rpx;
  }

  .phone {
    font-size: 28rpx;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.9);
  }

  .contact-business-box {
    padding-top: 24rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 8rpx dashed rgba(63,170,115,0.5);
    margin-top: 24rpx;

    .icon-phone {
      width: 40rpx;
      height: 40rpx;
      margin-right: 16rpx;
    }

    .contact-business0-txt {
      font-size: 28rpx;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.9);
      line-height: 40rpx;
    }
  }

  .shop-info {
    margin: 16rpx 32rpx 0;
    background: #ffffff;
    border-radius: 24rpx 24rpx 24rpx 24rpx;
    padding: 24rpx;

    .shop-left {
      display: flex;
      margin-bottom: 32rpx;
    }

    .shop-avatar {
      width: 40rpx;
      height: 40rpx;
      margin-right: 16rpx;
    }

    .shop-title {
      font-size: 28rpx;
      font-weight: 400;
      color: #777f8f;
      line-height: 40rpx;
    }

    .info-box {
      display: flex;
      align-items: center;
    }

    .left {
      width: 160rpx;
      height: 160rpx;
      margin-right: 24rpx;

      .avatar {
        width: 100%;
        height: 100%;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
      }
    }

    .right {
      flex: 1;

      .title {
        font-size: 32rpx;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.9);
        line-height: 44rpx;
        padding-bottom: 16rpx;
      }

      .shop-desc {
        display: inline-block;
        background: #F3F6F5;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        padding: 4rpx 8rpx;
        font-size: 24rpx;
        font-weight: 400;
        color: rgba(0,0,0,0.5);
        line-height: 32rpx;
        margin-bottom: 22rpx;
      }

      .price-num-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .price {
        font-size: 32rpx;
        font-weight: 700;
        color: rgba(0, 0, 0, 0.9);
        line-height: 34rpx;
      }

      .num {
        font-size: 32rpx;
        font-weight: 400;
        color: rgba(125, 152, 142, 1);
        line-height: 44rpx;
        text{
          font-size: 32rpx;
          font-weight: 400;
          color: rgba(0,0,0,0.9);
          line-height: 44rpx;
          margin-left: 12rpx;
        }
      }
    }

    .freight-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 36rpx;

      .freight-label {
        font-size: 28rpx;
        font-weight: 400;
        color: rgba(0,0,0,0.5);
        line-height: 40rpx;
      }

      .freight-text {
        font-size: 28rpx;
        font-weight: 700;
        color: rgba(0, 0, 0, 0.9);
        line-height: 40rpx;
      }
    }

    .pay-num-box {
      margin-top: 32rpx;
      display: flex;
      justify-content: flex-end;

      .pay-num-label {
        font-size: 28rpx;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.7);
        line-height: 40rpx;
      }

      .pay-num {
        font-size: 32rpx;
        font-weight: 700;
        color: #ff7614;
        line-height: 34rpx;
      }
    }
  }

  .order-info {
    margin: 16rpx 32rpx 0;
    background: #ffffff;
    border-radius: 24rpx 24rpx 24rpx 24rpx;
    padding: 24rpx;
    .order-title{
      width: 100%;
      font-size: 32rpx;
      font-weight: 600;
      color: rgba(0,0,0,0.9);
      line-height: 44rpx;
      margin-bottom: 24rpx;
    }
    .item {
      padding-bottom: 24rpx;
    }

    .order-label {
      font-size: 28rpx;
      font-weight: 400;
      color: #777f8f;
      line-height: 40rpx;
      margin-right: 48rpx;
    }

    .order-text {
      font-size: 28rpx;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.8);
      line-height: 40rpx;
    }
  }

  .btn-box {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 12rpx 32rpx calc(18rpx + env(safe-area-inset-bottom));
    width: calc(100% - 64rpx);
    height: 124rpx;
    bottom: 0;
    background: #ffffff;
    border: 2rpx solid rgba(0, 0, 0, 0.1);

    .cancel-order {
      width: 240rpx;
      height: 84rpx;
      background: #F3F6F5;
      border-radius: 44rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.7);
      line-height: 84rpx;
      text-align: center;
      margin-right: 24rpx;
    }

    .go-pay {
      width: 422rpx;
      height: 84rpx;
      background: #3FAA73;
      border-radius: 44rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: #ffffff;
      line-height: 84rpx;
      text-align: center;
    }

    .contact-service {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 254rpx;
      height: 84rpx;
      background: #F3F6F5;
      border-radius: 44rpx;

      .icon-service {
        width: 34rpx;
        height: 34rpx;
        margin-right: 14rpx;
      }

      .contact-text {
        font-size: 32rpx;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.7);
        line-height: 30rpx;
      }
    }
  }
}
</style>
